<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">售后服务</span>
    </div>

    <a-tabs @change="getContentList()">
      <a-tab-pane key="1" tab="全部" />
      <a-tab-pane key="2" tab="处理中" />
      <a-tab-pane key="3" tab="售后完成" />
    </a-tabs>

    <div class="custom-table">
      <!-- 内容 -->
      <OrderCard :list="list" :columns="columns" :loading="loading" :pagination="pagination" @change="handleTableChange">
        <template #extra="{ record }">
          <span class="settlement-amount">
            应结算: <span class="amount">{{ record.price || '300.00' }}</span>
          </span>
        </template>
        <template #bodyCell="{ column, record }">
          <div class="seller-info" v-if="column.dataIndex === 'companyName'">
            <a-avatar :src="record.avatar" />
            <div class="seller-detail">
              <span class="name">{{ record.userName }}</span>
              <span class="phone">{{ record.userPhoen }}</span>
            </div>
          </div>
          <div class="action-btns" v-if="column.dataIndex === 'action'">
            <a @click="checkOrder(record)">订单详情</a>
            <a-divider type="vertical" />
            <a class="contact-btn" @click="showModal(record)">联系买家</a>
          </div>
        </template>
      </OrderCard>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  import { requestTradeList } from '/@/api/exchange/trade'
  import router from '/@/router'

  import OrderCard from './OrderCard.vue'

  const columns = [
    {
      width: 500,
      title: '产品信息',
      dataIndex: 'title',
    },
    {
      title: '价格',
      width: 100,
      dataIndex: 'price',
    },
    {
      title: '卖家',
      dataIndex: 'companyName',
    },
    {
      title: '订单状态',
      dataIndex: 'status',
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 3,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<TradeTypes.SearchData>()

  const list = ref<TradeTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange = (tabPage: { current: number; pageSize: number }) => {
    pagination.value.current = tabPage.current
    pagination.value.pageSize = tabPage.pageSize
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestTradeList({
      ...page.value,
      ...searchParams.value,
    })
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: TradeTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  const showModal = (info?: TradeTypes.IResponse) => {
    console.log(info)
  }

  /* 查看订单 */
  const checkOrder = (info: TradeTypes.IResponse) => {
    router.push({
      path: `/trade/order-details/${info.id}`,
    })
  }
  // 删除评论
  // const deleteComment = (record: TradeTypes.IResponse) => {
  //   Modal.confirm({
  //     title: '删除',
  //     content: '是否删除该评论?',
  //     okText: '确定',
  //     cancelText: '取消',
  //     onOk: () => {
  //       // 删除
  //       console.log('删除', record)
  //     },
  //   })
  // }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped>
  .seller-info {
    display: flex;
    align-items: center;

    .seller-detail {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
    }
  }
</style>
